<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#logo {
  position: absolute;
  width: 200px;
  height: 40px;
  z-index: 1;
  margin-top: 7px;
  margin-left: 15px;
  cursor: pointer;
}

.header span {
  font-size: 15px;
  font-weight: bold;
}

.nav-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

header {
  height: 60px;
  top: 0;
  z-index: 99;
  position: absolute;
  width: 100%;
  flex: 0 0 auto;
  position: absolute;
  min-width: 1200px;
}

.content {
  /* flex: 1 0 auto; */
  margin-top: 60px;
}

footer {
  background-color: #515a6e;
  height: 60px;
  width: 100%;
  bottom: 0;
  flex: 0 0 auto;
  min-width: 1200px;
  z-index: 10;
}

.userState {
  position: absolute;
  width: 15%;
  top: 0px;
  z-index: 1;
  display: inline-block;
  min-width: fit-content;
}

.navPart {
  width: 85%;
  display: inline-block;
}

.menuItem a {
  font-size: 1.2em;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
}

.userImg {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}

.footerTop {
  text-align: center;
  color: white;
  font-weight: bold;
  margin-top: 10px;
}

.footerBottom {
  text-align: center;
  color: white;
  font-size: 0.8em;
}

.menuItemCell {
  font-weight: 900;
}

.menuItemCell:hover {
  background-color: #808695;
  color: white;
}
</style>
<template>
  <div class="nav-container">
    <div style="position: fixed; z-index: 99">
      <header style="position: inherit; min-width: -webkit-fill-available">
        <!-- <a
          class="pic"
          @click="goHome"
          style="
            position: absolute;
            z-index: 1;
            font-size: 20px;
            margin-top: 15px;
            color: white;
            margin-left: 3%;
          "
          >空间数据可视化课程资源共享平台</a
        > -->
        <a
          class="pic"
          @click="goHome"
          style="
            position: absolute;
            z-index: 1;
            font-size: 20px;
            margin-top: 15px;
            color: white;
            margin-left: 230px;
          "
          ><strong>参与式课程平台</strong></a
        >
        <img
          src="../assets/logo.png"
          id="logo"
          class="pic"
          @click="goHome"
          style="cursor: pointer; margin-left: 15px"
        />
        <div v-if="useMenuCSS">
          <div class="navPart">
            <Menu
              class="header"
              mode="horizontal"
              theme="dark"
              :active-name="activeMenu"
              @on-select="turnContent"
              :style="`z-index:0;background:` + headerBgColor"
              width="auto"
            >
              <MenuItem name="home" class="menuItem" style="margin-left: 35%">
                <span>首页</span>
              </MenuItem>
              <!-- <MenuItem name="projects" class="menuItem">
                <span>作品展示</span>
              </MenuItem> -->
              <MenuItem name="resources" class="menuItem">
                <span>资源库</span>
              </MenuItem>
              <MenuItem name="classList" class="menuItem">
                <span>课程管理</span>
              </MenuItem>
            </Menu>
          </div>
          <div class="userState">
            <Menu
              mode="horizontal"
              theme="dark"
              :active-name="activeMenu"
              @on-select="unlogin"
              :style="`z-index:0;background:` + headerBgColor"
              v-show="!userState"
              class="menuItem"
            >
              <MenuItem name="login">
                <span>登录</span>
              </MenuItem>
              <MenuItem name="register">
                <span>注册</span>
              </MenuItem>
            </Menu>
            <Menu
              mode="horizontal"
              theme="dark"
              @on-select="logged"
              :style="`z-index:0;background:` + headerBgColor"
              v-show="userState"
              class="menuItem"
            >
              <!-- <MenuItem name="notification">
                <Badge :count="unreadNoticeCount" id="noticeBadge">
                  <Icon type="ios-notifications-outline" size="25"></Icon>
                </Badge>
              </MenuItem> -->
              <MenuItem name="personal" style="width: 100px">
                <Dropdown @on-click="changeSelect" placement="bottom-start">
                  <div @click="toPersonalPage">
                    <img
                      v-bind:src="avatarUrl"
                      v-if="
                        userInfo.avatar != '' &&
                        userInfo.avatar != undefined &&
                        userInfo.avatar != null
                      "
                      :title="userInfo.userName"
                      style="width: 40px; height: 40px; vertical-align: middle"
                    />
                    <avatar
                      :username="userName"
                      :size="40"
                      style="margin-top: 10px"
                      :title="userName"
                      v-else
                    />
                    <h3
                      v-if="
                        userInfo.avatar != '' &&
                        userInfo.avatar != undefined &&
                        userInfo.avatar != null
                      "
                      style="
                        position: absolute;
                        left: 50px;
                        top: -9px;
                        width: 100px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        margin-top: 10px;
                      "
                    >
                      {{ userInfo.name }}
                    </h3>
                    <h3
                      v-else
                      style="
                        position: absolute;
                        left: 50px;
                        top: -9px;
                        width: 100px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                      "
                    >
                      {{ userInfo.name }}
                    </h3>
                  </div>
                  <DropdownMenu slot="list">
                    <DropdownItem name="logout">退出登录</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              </MenuItem>
            </Menu>
          </div>
        </div>

        <div v-else>
          <Menu mode="horizontal" theme="dark" style="z-index: 0"></Menu>
          <Dropdown style="position: fixed; top: 10px; right: 20px">
            <Button
              icon="md-menu"
              style="color: white; background-color: #808695"
            ></Button>
            <DropdownMenu slot="list">
              <CellGroup style="width: 200px">
                <Cell @click.native="turnToURL('home')" class="menuItemCell">首页 </Cell>
                <!-- <Cell
                  @click.native="turnToURL('projectList')"
                  class="menuItemCell"
                  >作品展示
                </Cell> -->
                <Cell @click.native="turnToURL('SymbolLibrary')" class="menuItemCell"
                  >资源库
                </Cell>
                <Cell @click.native="turnToURL('classList')" class="menuItemCell"
                  >课程管理
                </Cell>
                <!-- <Cell
                  @click.native="turnToURL('classList')"
                  class="menuItemCell"
                  >帮助
                </Cell> -->
                <Divider style="margin: 5px 0" />
                <Cell
                  v-show="!userState"
                  @click.native="turnToURL('Login')"
                  class="menuItemCell"
                  >登录
                </Cell>
                <Cell
                  v-show="!userState"
                  @click.native="turnToURL('Register')"
                  class="menuItemCell"
                  >注册
                </Cell>
                <!-- <Cell
                  v-show="userState"
                  @click.native="turnToURL('notification')"
                  class="menuItemCell"
                  >消息
                </Cell> -->
                <Cell
                  v-show="userState"
                  @click.native="toPersonalPage"
                  class="menuItemCell"
                  >个人主页
                </Cell>
                <Cell v-show="userState" @click.native="logout" class="menuItemCell"
                  >退出登录
                </Cell>
              </CellGroup>
            </DropdownMenu>
          </Dropdown>
        </div>
      </header>
    </div>
    <div class="content" :style="{ minHeight: contentHeight }">
      <router-view
        @sendNotice="sendMessage"
        @readNotification="readNotificationNum"
        @userReLogin="userReLogin"
      ></router-view>
    </div>
    <!-- 首页底部-->
    <footer>
      <h2 class="footerTop">
        <!-- <i>信息工程大学</i> -->
        <!-- <i>Open Geographic Modeling and Simulation</i> -->
        <i>南京师范大学地理科学学院</i>
      </h2>
      <!-- <p class="footerBottom">
        Copyright © 2011-2022 OpenGMS. All rights reserved.
      </p> -->
      <!-- <p class="footerBottom">
       xxx@xx.edu.com
     </p> -->
    </footer>
  </div>
</template>
<script>
import Avatar from "vue-avatar";
// import * as socketApi from "../api/socket";

export default {
  name: "HelloWorld",
  data() {
    return {
      userInfo: {},
      activeMenu: "",
      //消息机制
      noticeSocket: null,
      unreadNoticeCount: 0,
      timer: null,
      contentHeight: window.innerHeight - 120 + "px",
      useMenuCSS: false,
    };
  },
  created() {
    this.setUserState();
    this.setMenuTitle(this.$route.name);
    var that = this;
    var timer = window.setInterval(function () {
      if (that.$store.getters.userState) {
        // that.linkSocket();
        // window.clearInterval(timer);
      }
    }, 10);
  },
  mounted() {
    // this.linkSocket();
    this.reSize();
    window.addEventListener("resize", this.reSize);
  },
  beforeDestroy: function () {
    window.removeEventListener("resize", this.reSize);
  },
  // updated() {
  //   $(".userState sup").css("margin-top", "20px");
  // },
  components: {
    Avatar,
  },
  computed: {
    userState() {
      return this.$store.getters.userState;
    },
    userName() {
      return this.$store.getters.userName;
    },
    avatarUrl: function () {
      let temp = this.userInfo.avatar;
      return this.$store.getters.dataSever + temp;
    },
    headerBgColor() {
      return this.$route.name === "Home" ? "none" : "";
    },
    notifications() {
      return this.$store.getters.notifications;
    },
  },
  watch: {
    "$route.name": function (newVal, oldVal) {
      this.setMenuTitle(newVal);
    },
    notifications(newVal, oldVal) {
      if (newVal.length > 0) {
        for (let i = 0; i < newVal.length; i++) {
          this.sendMessage(newVal[i]);
        }
        this.$store.commit("cleanNotification");
      }
    },
  },
  methods: {
    setUserState() {
      // console.log(JSON.parse(sessionStorage.getItem('userInfo')));
      let localStorageUserInfo = JSON.parse(localStorage.getItem("userInfo"));
      if (
        localStorageUserInfo == undefined ||
        localStorageUserInfo == null ||
        localStorageUserInfo == ""
      ) {
        let userInfo = {
          userState: false,
          name: "visitor",
          userId: "",
          avatar: "",
          token: "",
        };
        localStorage.setItem("userInfo", JSON.stringify(userInfo));
        this.$router.go(0);
      } else {
        this.$store.commit("setUserInfo", localStorageUserInfo);
        this.userInfo = localStorageUserInfo;
      }
    },
    turnToURL(urlName) {
      // window.location.href = '/visualResourceLibrary' + url;
      this.$router.push({ name: urlName });
    },
    // linkSocket() {
    //   if (this.$store.getters.userState) {
    //     this.initWebSocket();
    //     this.getUnreadNoticeCount();
    // }
    // },
    setMenuTitle(newVal) {
      switch (newVal) {
        case "home": {
          this.activeMenu = "home";
          break;
        }
        case "projectList": {
          this.activeMenu = "projects";
          break;
        }
        case "projectInfo": {
          this.activeMenu = "projects";
          break;
        }
        case "SymbolLibrary": {
          this.activeMenu = "resources";
          break;
        }
        case "moocCurriculum": {
          this.activeMenu = "resources";
          break;
        }
        case "materialLibrary": {
          this.activeMenu = "resources";
          break;
        }
        case "webLibrary": {
          this.activeMenu = "resources";
          break;
        }
        case "toolsCenter": {
          this.activeMenu = "resources";
          break;
        }
        case "literatureResource": {
          this.activeMenu = "resources";
          break;
        }
        case "classList": {
          this.activeMenu = "classList";
          break;
        }
        case "classInfo": {
          this.activeMenu = "classList";
          break;
        }
        case "Login": {
          this.activeMenu = "login";
          break;
        }
        case "Register": {
          this.activeMenu = "register";
          break;
        }
        default:
          this.activeMenu = "";
      }
    },
    reSize() {
      if (window.innerHeight > 675) {
        this.contentHeight = window.innerHeight - 120 + "px";
      } else {
        this.contentHeight = 675 - 120 + "px";
      }
      if (window.innerWidth < 1400) {
        this.useMenuCSS = false;
      } else {
        this.useMenuCSS = true;
      }
    },
    turnContent(name) {
      if (name === "home") {
        this.$router.push({ name: "home" });
        // window.location.href = "/visualCoursePlatform/home";
      } else if (name == "projects") {
        this.$router.push({ name: "projectList" });
        // window.location.href = "/visualCoursePlatform/projectList";
      } else if (name == "resources") {
        this.$router.push({ name: "SymbolLibrary" });
        // window.location.href = "/visualCoursePlatform/publicResource";
      } else if (name == "classList") {
        this.$router.push({ name: "classList" });
        // window.location.href = "/visualCoursePlatform/classList";
      }
    },
    goHome() {
      this.$router.push({ name: "home" });
    },
    unlogin(name) {
      if (name === "login") {
        this.$router.push({ name: "Login" });
        // window.location.href = "/visualCoursePlatform/login";
      } else if (name == "register") {
        this.$router.push({ name: "Register" });
        // window.location.href = "/visualCoursePlatform/register";
      }
    },
    logged(name) {
      if (name === "notification") {
        this.$router.push({ name: "notification" });
      } else if (name === "personal") {
      }
    },
    toPersonalPage() {
      this.$router.push({ name: "userInfo" });
      // window.location.href = "/visualCoursePlatform/newPersonalPage";
      // this.$router.push({ name: "PersonalPage" });
    },
    // 获取到通知的数量
    getUnreadNoticeCount() {
      this.unreadNoticeCount = 0;
      //get请求发送的是用户id
      this.axios
        .get(
          "/GeoProblemSolving/notice/inquiry" +
            "?key=recipientId" +
            "&value=" +
            this.$store.getters.userId
        )
        .then((res) => {
          let noticeList = res.data;
          let unreadCount = 0;
          for (let i = 0; i < noticeList.length; i++) {
            if (noticeList[i].state === "unread") {
              unreadCount++;
              continue;
            }
          }
          this.$set(this, "unreadNoticeCount", unreadCount);
        })
        .catch((err) => {
          console.log("失败的原因是" + err.data);
        });
    },
    // initWebSocket() {
    //   socketApi.initWebSocket("NoticeSocket");
    //   socketApi.sendSock("NoticeSocket", {"type": "ping"}, this.getSocketMessage)
    // },
    // onOpen() {
    //   // console.log("NoticeSocket连接成功！");
    // },
    userReLogin(data) {
      // console.log(data);
      this.userInfo = data;
    },
    sendMessage: function (data) {
      socketApi.sendSock("NoticeSocket", data, this.getSocketMessage);
    },
    getSocketMessage(data) {
      this.unreadNoticeCount++;
      this.$Message.info("You have a new notice!");
      // console.log(data);
    },
    readNotificationNum() {
      let newCount = this.unreadNoticeCount;
      if (newCount > 0) {
        this.unreadNoticeCount = newCount - 1;
      }
    },
    changeSelect(name) {
      if (name == "logout") {
        this.logout();
      }
    },
    logout() {
      //临时版本
      this.$store.commit("userLogout");
      // sessionStorage.removeItem("userInfo");
      this.$router.push({ name: "home" });
      // window.location.href = "/visualCoursePlatform/home";
    },
  },
};
</script>
